let laypage;
let form;
let layer;
layui.use(['laypage', 'form', 'layer'], function() {
  laypage = layui.laypage;
  form = layui.form;
  layer = layui.layer;



  // *****************************1。加载首页1页  3条文章的数据
  let data = {
    pagenum: 1,
    pagesize: 2
  };

  function list() {
    $.ajax({
      url: "/my/article/list",
      data: data,
      success: function(res) {
        if (res.status == 0) {
          $("tbody").html("");
          res.data.forEach(function(ele) {
            let one = $(`<tr>
                      <td>${ele.title}</td>
                      <td>${ele.cate_name}</td>
                      <td>${ele.pub_date}</td>
                      <td>${ele.state}</td>
                      <th>
                        <a href="/article/edit/edit.html?id=${ele.Id}" class="layui-btn layui-btn-xs">编辑</a>
                        <button type="button" class="layui-btn layui-btn-xs layui-btn-danger del" _id=${ele.Id}>删除</button>
                      </th>
                    </tr>`);
            $("tbody").append(one);
          });

          // 初始化分页器
          bar(res.total);
        }
      }
    });
  }
  list();


  //******************************2.加载分页器 执行一个laypage实例
  // 1.查文档 laypage 初始化
  // 2.laypage需要总数，从哪ajax回调函数内部才能，封装函数，不然代码冗余
  // 3.封装函数单独提出去
  // 4.当用户点击切换的时候，不需要注册点击事件，使用jump，用户点击后，使用点击后的参数重新调用ajax列表，再次调用数据；
  function bar(count) {
    laypage.render({
      elem: 'page', // 注意，这里的 test1 是 ID，不用加 # 号
      count: count, // 数据总数，从服务端得到,
      limit: data.pagesize, // limit限制 每页显示几条数据
      curr: data.pagenum,
      // limits: [2, 3, 5, 10], // 下拉框的值，表示每页多少条，选择每页显示几条
      // layout: ['prev', 'page', 'next', 'limit', 'skip'],  // 辅助

      // 当用户点击页面跳转的时候：
      jump: function(obj, first) {
        // 用户自己点击 跳转
        if (first == undefined) {

          // obj是用户操作后对象数据  obj.curr
          data.pagenum = obj.curr;
          // ajax
          list();

        }
      }
    });
  }


  // ******************************3.筛选功能：
  $("#fl").append(`<option value="">请选择文章类别</option>`)
  $.ajax({
    url: "/my/article/cates",
    success: function(res) {
      if (res.status == 0) {
        $.each(res.data, function(index, item) {
          let one = $(`<option value=${item.Id}>${item.name}</option>`);
          $("#fl").append(one);
        });


        form.render('select'); //select不是选择器，页面渲染元素重新渲染下
      }
    }
  });


  // 点击 筛选按钮
  $("form").on("submit", function(e) {
    e.preventDefault();
    //    1.获取到 分类 和 状态 数据，应该对于下面操作应该对象或者数组！
    let arr = $(this).serializeArray();

    //    2.重新设置给data；
    data.cate_id = arr[0].value;
    data.state = arr[1].value;
    data.pagenum = 1;

    //    3.重新请求ajax列表
    list();
  });



  // ********************************4.删除功能
  $("tbody").on("click", ".del", function() {
    // 1.获取id
    let id = $(this).attr("_id");


    // 2.ajax
    layer.confirm('确定要删除么?', function(index) {

      $.ajax({
        // 动态URL地址：  :id  代表动态传入id值
        url: "/my/article/delete/" + id,
        success: function(res) {
          layer.msg(res.message);


          // 重回第一页
          data.pagenum = 1;
          list();

          layer.close(index);
        }
      });

    });

  });





});